<template>
  <div class="container">
    <h1 style="margin-top:200px;font-weight:bold;">学生信息管理</h1>
    <ol class="breadcrumb" style="background:white">
      <li class="breadcrumb-item">
        <router-link to="/" style="color:#111111">登录</router-link>
      </li>
      <li class="breadcrumb-item active">
        <router-link to="/register">注册</router-link>
      </li>
    </ol>
    <div class="alert alert-success" v-if="isRegisterSuccess">
      <strong>注册成功!</strong>可进行登录
    </div>
    <div class="alert alert-danger" v-if="falseMsg != ''">
      <strong>{{falseMsg}}</strong>
    </div>
    <form class="form-box">
      <div class="form-group">
        <label for="uname">用户名:</label>
        <input type="uname" class="form-control" id="uname" placeholder="输入用户名">
      </div>
      <div class="form-group">
        <label for="pwd">密码:</label>
        <input type="password" class="form-control" id="pwd" placeholder="输入密码">
      </div>
      <div class="form-group">
        <label for="sname">姓名:</label>
        <input type="sname" class="form-control" id="sname" placeholder="输入用户名">
      </div>
      <button type="submit" class="btn btn-primary" @click="toRegister">注册</button>
    </form>
  </div>
</template>
<script>
import {registerFunction} from '../api/registerJS'
export default {
  data() {
    return {
      isRegisterSuccess:false,
      falseMsg:''
    }
  },
  methods: {
    toRegister(){
      var uname = $('#uname').val()
      var upass = $('#pwd').val()
      var sname = $('#sname').val()
      if(uname == ''){
        // alert('用户名不能为空！')
        this.falseMsg = '用户名不能为空！'
      }
      else if(upass == ''){
        // alert('密码不能为空！')
        this.falseMsg = '密码不能为空！'
      }
      else if(sname == ''){
        // alert('姓名不能为空')
        this.falseMsg = '姓名不能为空'
      }
      else{
        registerFunction(uname,upass,sname).then(res => {
          // console.log(res.data.success)
          if(res.data.success == true){
            this.isRegisterSuccess = true
            this.falseMsg = ''
          }
          else{
            // alert(res.data.data.msg)
            this.falseMsg = res.data.data.msg
            this.isRegisterSuccess = false
          }
        })
      }
    }
  },
}
</script>
<style>
.form-box{
  width: 500px;
  margin-top: 10px;
}
</style>